﻿@page "/component/common/label"

<Pager DataSource="Menu">
    <Body>
        <Header1 Divider>
            Label
            <SubHeader>
                A label displays content classification
            </SubHeader>
        </Header1>

        <PresentationPart Title="Demo">
            <RunTemplate>
                <Label>Label</Label>
                <Label><Icon IconClass="mail" /> 123</Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label>Label</Label>
<Label><Icon IconClass=""mail""/> 123</Label>
```
        ")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Color">
            <RunTemplate>
                <Label Color="Color.Red"><Icon IconClass="mail" /> 99+</Label>
                <Label Color="Color.Grey"><Icon IconClass="plus" /> Follow</Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label Color=""Color.Red""><Icon IconClass=""mail"" /> 99+</Label>
<Label Color=""Color.Grey""><Icon IconClass=""plus"" /> Follow</Label>
```
        ")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Link Label">
            <RunTemplate>
                <LabelAnchor href="/">
                    <Icon IconClass="plus" /> Follow
                </LabelAnchor>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<LabelAnchor href=""/"">
    <Icon IconClass=""plus"" /> Follow
</LabelAnchor>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Image">
            <Description>
                A label can be formatted to emphasize an image
            </Description>
            <RunTemplate>
                <Label Image Color="Color.Red">
                    <Image Src="img/avatar/ade.jpg"/> Ade
                </Label>
                <Label Image Color="Color.Green">
                    <Image Src="img/avatar/christian.jpg" /> Christian
                </Label>
                <Label Image Color="Color.Brown">
                    <Image Src="img/avatar/elliot.jpg" /> Elliot
                </Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label Image Color=""Color.Red"">
    <Image Src=""img/avatar/ade.jpg""/> Ade
</Label>
<Label Image Color=""Color.Green"">
    <Image Src=""img/avatar/christian.jpg""/> Christian
</Label>
<Label Image Color=""Color.Brown"">
    <Image Src=""img/avatar/elliot.jpg""/> Elliot
</Label>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Image Link Label">
            <RunTemplate>
                <LabelAnchor Image href="#">
                    <Image Src="img/avatar/jenny.jpg" /> Jenny
                </LabelAnchor>
                <LabelAnchor Image href="#">
                    <Image Src="img/avatar/joe.jpg" /> Joe
                </LabelAnchor>
                <LabelAnchor Image href="#">
                    <Image Src="img/avatar/nan.jpg" /> Nan
                </LabelAnchor>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<LabelAnchor Image href=""#"">
    <Image Src=""img/avatar/jenny.jpg"" /> Jenny
</LabelAnchor>
<LabelAnchor Image href=""#"">
    <Image Src=""img/avatar/joe.jpg"" /> Joe
</LabelAnchor>
<LabelAnchor Image href=""#"">
    <Image Src=""img/avatar/nan.jpg"" /> Nan
</LabelAnchor>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Detail">
            <Description>
                A label can contain a detail
            </Description>
            <RunTemplate>
                <Label Image Color="Color.Orange">
                    <Image Src="img/avatar/stevie.jpg" /> Stevie
                    <LabelDetail>Engineer</LabelDetail>
                </Label>
                <Label Image Color="Color.Yellow">
                    <Image Src="img/avatar/veronika.jpg" /> Veronika
                    <LabelDetail>Designer</LabelDetail>
                </Label>
                <Label Image Color="Color.Purple">
                    <Image Src="img/avatar/zoe.jpg" /> Zoe
                    <LabelDetail>Manager</LabelDetail>
                </Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label Image Color=""Color.Orange"">
    <Image Src=""img/avatar/stevie.jpg"" /> Stevie
    <LabelDetail>Engineer</LabelDetail>
</Label>
<Label Image Color=""Color.Yellow"">
    <Image Src=""img/avatar/veronika.jpg"" /> Veronika
    <LabelDetail>Designer</LabelDetail>
</Label>
<Label Image Color=""Color.Purple"">
    <Image Src=""img/avatar/zoe.jpg"" /> Zoe
    <LabelDetail>Manager</LabelDetail>
</Label>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Corner">
            <Description>
                A label can position itself in the corner of an element
            </Description>
            <RunTemplate>
                <Grid Span="SpanSize.Is2">
                    <GridColumn>
                        <ImageContent>
                            <Label Color="Color.Red" Cornered="HorizontalPosition.Left">
                                <Icon IconClass="heart" />
                            </Label>
                            <Image UI Src="img/image.png" />
                        </ImageContent>
                    </GridColumn>
                    <GridColumn>
                        <ImageContent>
                            <Label Color="Color.Yellow" Cornered="HorizontalPosition.Right">
                                <Icon IconClass="lock" />
                            </Label>
                            <Image UI Src="img/image.png" />
                        </ImageContent>
                    </GridColumn>
                </Grid>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Grid Span=""ColSpan.Is2"">
    <GridColumn>
        <ImageContent>
            <Label Color=""Color.Red"" Cornered=""HorizontalPosition.Left"">
                <Icon IconClass=""heart"" />
            </Label>
            <Image UI Src=""img/image.png"" />
        </ImageContent>
    </GridColumn>
    <GridColumn>
        <ImageContent>
            <Label Color=""Color.Yellow"" Cornered=""HorizontalPosition.Right"">
                <Icon IconClass=""lock"" />
            </Label>
            <Image UI Src=""img/image.png"" />
        </ImageContent>
    </GridColumn>
</Grid>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Tag">
            <Description>
                A label can appear as a tag
            </Description>
            <RunTemplate>
                <Label Tag>
                    New
                </Label>
                <Label Tag Color="Color.Red">
                    Need Password
                </Label>
                <Label Tag Color="Color.Green">
                    Featured
                </Label>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Label Tag>
    新文件
</Label>
<Label Tag Color=""Color.Red"">
    Need Password
</Label>
<Label Tag Color=""Color.Green"">
    Featured
</Label>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Ribbon">
            <Description>
                A label can appear as a ribbon attaching itself to an element.
            </Description>
            <RunTemplate>
                <Grid Span="SpanSize.Is2">
                    <GridColumn>
                        <Segment Raised>
                            <Label Ribbon="HorizontalPosition.Left" Color="Color.Red">Overview</Label>
                            <ParagraphDemo FullWidth />
                            <Label Ribbon="HorizontalPosition.Left" Color="Color.Blue">Connection</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                    <GridColumn>
                        <Segment>
                            <Label Ribbon="HorizontalPosition.Right" Color="Color.Orange">Specification</Label>
                            <ParagraphDemo FullWidth />
                            <Label Ribbon="HorizontalPosition.Right" Color="Color.Black">Contact</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                </Grid>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Grid ColSpan=""ColSpan.Is2"">
    <GridColumn>
        <Segment Raised>
            <Label Ribbon=""HorizontalPosition.Left"" Color=""Color.Red"">Overview</Label>
            <ParagraphDemo />
            <Label Ribbon=""HorizontalPosition.Left"" Color=""Color.Blue"">Connection</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
    <GridColumn>
        <Segment>
            <Label Ribbon=""HorizontalPosition.Right"" Color=""Color.Orange"">Specification</Label>
            <ParagraphDemo />
            <Label Ribbon=""HorizontalPosition.Right"" Color=""Color.Black"">Contact</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
</Grid>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart>
            <RunTemplate>
                <Grid Span="SpanSize.Is2">
                    <GridColumn>
                        <ImageContent Fluid>
                            <Label Ribbon="HorizontalPosition.Left" Color="Color.Red">Global</Label>
                            <Image Src="img/image.png" UI="false" />
                        </ImageContent>
                    </GridColumn>
                    <GridColumn>
                        <ImageContent Fluid>
                            <Label Ribbon="HorizontalPosition.Right" Color="Color.Yellow">Award</Label>
                            <Image Src="img/image.png" UI="false" />
                        </ImageContent>
                    </GridColumn>
                </Grid>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Grid ColSpan=""ColSpan.Is2"">
    <GridColumn>
        <ImageContent Fluid>
            <Label Ribbon=""HorizontalPosition.Left"" Color=""Color.Red"">Global</Label>
            <Image Src=""img/image.png"" />
        </ImageContent>
    </GridColumn>
    <GridColumn>
        <ImageContent Fluid>
            <Label Ribbon=""HorizontalPosition.Right"" Color=""Color.Yellow"">Award</Label>
            <Image Src=""img/image.png"" />
        </ImageContent>
    </GridColumn>
</Grid>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Attached">
            <Description>
                A label can attach to a content segment
            </Description>
            <RunTemplate>
                <Grid Span="SpanSize.Is3">
                    <GridColumn>
                        <Segment>
                            <Label Attached AttachedVertical="VerticalPosition.Top">HTML</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                    <GridColumn>
                        <Segment>
                            <Label Attached AttachedVertical="VerticalPosition.Bottom">CSS</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                    <GridColumn>
                        <Segment>
                            <Label Attached AttachedHorizontal="HorizontalPosition.Right" AttachedVertical="VerticalPosition.Top">CODE</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                    <GridColumn>
                        <Segment>
                            <Label Attached AttachedVertical="VerticalPosition.Top" AttachedHorizontal="HorizontalPosition.Left">Review</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                    <GridColumn>
                        <Segment>
                            <Label Attached AttachedHorizontal="HorizontalPosition.Left" AttachedVertical="VerticalPosition.Bottom">Feedback</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                    <GridColumn>
                        <Segment>
                            <Label Attached AttachedHorizontal="HorizontalPosition.Right" AttachedVertical="VerticalPosition.Bottom">Script</Label>
                            <ParagraphDemo FullWidth />
                        </Segment>
                    </GridColumn>
                </Grid>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Grid ColSpan=""ColSpan.Is3"">
    <GridColumn>
        <Segment>
            <Label Attached AttachedVertical=""VerticalPosition.Top"">HTML</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
    <GridColumn>
        <Segment>
            <Label Attached AttachedVertical=""VerticalPosition.Bottom"">CSS</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
    <GridColumn>
        <Segment>
            <Label Attached AttachedHorizontal=""HorizontalPosition.Right"" AttachedVertical=""VerticalPosition.Top"">CODE</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
    <GridColumn>
        <Segment>
            <Label Attached AttachedVertical=""VerticalPosition.Top"" AttachedHorizontal=""HorizontalPosition.Left"">Review</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
    <GridColumn>
        <Segment>
            <Label Attached AttachedHorizontal=""HorizontalPosition.Left"" AttachedVertical=""VerticalPosition.Bottom"">Feedback</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
    <GridColumn>
        <Segment>
            <Label Attached AttachedHorizontal=""HorizontalPosition.Right"" AttachedVertical=""VerticalPosition.Bottom"">Script</Label>
            <ParagraphDemo />
        </Segment>
    </GridColumn>
</Grid>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Horizontal">
            <Description>
                A horizontal label is formatted to label content along-side it horizontally
            </Description>
            <RunTemplate>
                <List Selectable Divider>
                    <Item>
                        <Label Color="Color.Red" Horizontal>Failed</Label>
                        Press button has a bug.
                    </Item>
                    <Item>
                        <Label Color="Color.Yellow" Horizontal>Doing</Label>
                        As a saler, I want to sell a car for my customer.
                    </Item>
                    <Item>
                        <Label Color="Color.Blue" Horizontal>To Do</Label>
                        As a manager, I want to export a Excel work sheet, so that I can do presentation of my report.
                    </Item>
                    <Item>
                        <Label Color="Color.Green" Horizontal>Closed</Label>
                        <s><Text Color="Color.Grey">Export module is not correct.</Text></s>
                    </Item>
                </List>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<List Selectable Divider>
            <Item>
                <Label Color=""Color.Red"" Horizontal>Failed</Label>
                Press button has a bug.
            </Item>
            <Item>
                <Label Color=""Color.Yellow"" Horizontal>Doing</Label>
                As a saler, I want to sell a car for my customer.
            </Item>
            <Item>
                <Label Color=""Color.Blue"" Horizontal>To Do</Label>
                As a manager, I want to export a Excel work sheet, so that I can do presentation of my report.
            </Item>
            <Item>
                <Label Color=""Color.Green"" Horizontal>Closed</Label>
                <s><Text Color=""Color.Grey"">Export module is not correct.</Text></s>
            </Item>
</List>
```
        ")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Floating">
            <Description>
                A label can float above or below another element.
            </Description>
            <RunTemplate>
                <Menu Compact>
                    <Item>
                        <Icon IconClass="mail" /> Messages
                        <Label Floating="CornerPosition.BottomLeft" Color="Color.Red">60</Label>
                    </Item>
                    <Item>
                        <Icon IconClass="phone" /> Calls
                        <Label Floating="CornerPosition.TopLeft" Color="Color.Red">12</Label>
                    </Item>
                    <Item>
                        <Icon IconClass="cogs" /> Settings
                        <Label Floating="CornerPosition.TopRight" Color="Color.Olive">7</Label>
                    </Item>
                    <Item>
                        <Icon IconClass="comments" /> Notifications
                        <Label Floating="CornerPosition.BottomRight" Color="Color.Blue">999</Label>
                    </Item>
                </Menu>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Menu Compact>
    <Item>
        <Icon IconClass=""mail"" /> Messages
        <Label Floating=""CornerPosition.BottomLeft"" Color=""Color.Red"">60</Label>
    </Item>
    <Item>
        <Icon IconClass=""phone"" /> Calls
        <Label Floating=""CornerPosition.TopLeft"" Color=""Color.Red"">12</Label>
    </Item>
    <Item>
        <Icon IconClass=""cogs"" /> Settings
        <Label Floating=""CornerPosition.TopRight"" Color=""Color.Olive"">7</Label>
    </Item>
    <Item>
        <Icon IconClass=""comments"" /> Notifications
        <Label Floating=""CornerPosition.BottomRight"" Color=""Color.Blue"">999</Label>
    </Item>
</Menu>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Circular">
            <Description>
                A label can be circular
            </Description>
            <RunTemplate>
                <Label Color="Color.Red" Circular>1</Label>
                <Label Color="Color.Orange" Circular>2</Label>
                <Label Color="Color.Yellow" Circular>3</Label>
                <Label Color="Color.Green" Circular>4</Label>
                <Label Color="Color.Teal" Circular>5</Label>
                <Label Color="Color.Blue" Circular>6</Label>
                <Label Color="Color.Purple" Circular>7</Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label Color=""Color.Red"" Circular>1</Label>
<Label Color=""Color.Orange"" Circular>2</Label>
<Label Color=""Color.Yellow"" Circular>3</Label>
<Label Color=""Color.Green"" Circular>4</Label>
<Label Color=""Color.Teal"" Circular>5</Label>
<Label Color=""Color.Blue"" Circular>6</Label>
<Label Color=""Color.Purple"" Circular>7</Label>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Basic">
            <Description>
                A label can reduce its complexity
            </Description>
            <RunTemplate>
                <Label Basic>Basic</Label>
                <Label Basic Pointer="RelativePosition.Above">Pointing</Label>
                <Label Basic Image><Image Src="/img/avatar/zoe.jpg" /> Zoe</Label>
                <Label Basic Pointer="RelativePosition.Left" Color="Color.Red">Required</Label>
                <Label Basic Color="Color.Blue">Blue</Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label Basic>Basic</Label>
<Label Basic Pointer=""RelativePosition.Above"">Pointing</Label>
<Label Basic Image><Image Src=""/img/avatar/zoe.jpg"" /> Zoe</Label>
<Label Basic Pointer=""RelativePosition.Left"" Color=""Color.Red"">Required</Label>
<Label Basic Color=""Color.Blue"">Blue</Label>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="Size">
            <RunTemplate>
                <Label Size="Size.Mini">Mini</Label>
                <Label Size="Size.Tiny">Tiny</Label>
                <Label Size="Size.Small">Small</Label>
                <Label Size="Size.Medium">Medium</Label>
                <Label Size="Size.Large">Large</Label>
                <Label Size="Size.Big">Big</Label>
                <Label Size="Size.Huge">Huge</Label>
                <Label Size="Size.Massive">Massive</Label>
                <br />
                <Label Basic Size="Size.Mini">Mini</Label>
                <Label Basic Size="Size.Tiny">Tiny</Label>
                <Label Basic Size="Size.Small">Small</Label>
                <Label Basic Size="Size.Medium">Medium</Label>
                <Label Basic Size="Size.Large">Large</Label>
                <Label Basic Size="Size.Big">Big</Label>
                <Label Basic Size="Size.Huge">Huge</Label>
                <Label Basic Size="Size.Massive">Massive</Label>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Label Size=""Size.Mini"">Mini</Label>
<Label Size=""Size.Tiny"">Tiny</Label>
<Label Size=""Size.Small"">Small</Label>
<Label Size=""Size.Medium"">Medium</Label>
<Label Size=""Size.Large"">Large</Label>
<Label Size=""Size.Big"">Big</Label>
<Label Size=""Size.Huge"">Huge</Label>
<Label Size=""Size.Massive"">Massive</Label>
<br />
<Label Basic Size=""Size.Mini"">Mini</Label>
<Label Basic Size=""Size.Tiny"">Tiny</Label>
<Label Basic Size=""Size.Small"">Small</Label>
<Label Basic Size=""Size.Medium"">Medium</Label>
<Label Basic Size=""Size.Large"">Large</Label>
<Label Basic Size=""Size.Big"">Big</Label>
<Label Basic Size=""Size.Huge"">Huge</Label>
<Label Basic Size=""Size.Massive"">Massive</Label>
```
")
            </CodeTemplate>
        </PresentationPart>
        <Header2 Divider>Group</Header2>
        <PresentationPart Title="Group Size">
            <Description>Labels can share sizes together</Description>
            <RunTemplate>
                <LabelGroup Size="Size.Large">
                    <Label>Fun <Icon IconClass="close" /> </Label>
                    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
                    <Label>Smart</Label>
                    <Label>Exciting</Label>
                </LabelGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<LabelGroup Size=""Size.Large"">
    <Label>Fun <Icon IconClass=""close""/> </Label>
    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
    <Label>Smart</Label>
    <Label>Exciting</Label>
</LabelGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Colored Group">
            <Description>
                Labels can share colors together
            </Description>
            <RunTemplate>
                <LabelGroup Color="Color.Blue">
                    <Label>Fun <Icon IconClass="close" /> </Label>
                    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
                    <Label>Smart</Label>
                    <Label>Exciting</Label>
                </LabelGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<LabelGroup Color=""Color.Blue"">
    <Label>Fun <Icon IconClass=""close""/> </Label>
    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
    <Label>Smart</Label>
    <Label>Exciting</Label>
</LabelGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Basic Group">
            <Description>
                Labels can share their style together
            </Description>
            <RunTemplate>
                <LabelGroup Basic>
                    <Label>Fun <Icon IconClass="close" /> </Label>
                    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
                    <Label>Smart</Label>
                    <Label>Exciting</Label>
                </LabelGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<LabelGroup Basic>
    <Label>Fun <Icon IconClass=""close""/> </Label>
    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
    <Label>Smart</Label>
    <Label>Exciting</Label>
</LabelGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Circular Group">
            <Description>
                Labels can share shapes
            </Description>
            <RunTemplate>
                <LabelGroup Circular>
                    <Label>Fun <Icon IconClass="close" /> </Label>
                    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
                    <Label>Smart</Label>
                    <Label>Exciting</Label>
                </LabelGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<LabelGroup Circular>
    <Label>Fun <Icon IconClass=""close""/> </Label>
    <Label>Happy <LabelDetail>33</LabelDetail> </Label>
    <Label>Smart</Label>
    <Label>Exciting</Label>
</LabelGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>
@code{
    List<string> Menu = new List<string>(new[]
    {
        "Demo","Color","Link Label","Image","Image Link Label","Detail",
        //"带指向的文本",
        "Color","Tag","Ribbon","Attached",
       "Horizontal","Floating", "Circular","Basic","Size","Group Size","Colord Group","Basic Group","Circular Group"
    });
}